<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <style type="text/css">
    .frame{ 
      margin: 0 auto;
      text-align: center;
	  background:url(img/11.gif);
	  width:600px;
	  height:440px;
      }
    .WYU{
      margin-top: 150px;
      background: #ffb6c1;
      font-size: 20px;


    }
    .but{
      border: 1px solid red;
      width: 200px;
      height: 50px;
      background:#ccc;
      /*margin-left: auto;*/
      margin: 0 auto;
     text-align: center;
      margin-top: 8px;
    }
    .bte,.bte1{
      background: #00ffff;
      width: 70px;
       margin-top: 8px;
    }
  </style>
	<script type="text/javascript">
  window.onload=function(){
    var aList=["陈海霞","黄柳芸","黄庭壮","韦杰","王定宇","黄艳妃","黄秋燕","韦柳宇","殷丹丹","莫昌贵","滚吉逢","邱宏伟","韦美仪","姚璐","陆丹娜","王玲","韦秋莲","宁金燕","李小欢","韦浪满","欧阳玉","韦幸宜","覃柳贵","吴喜鹏","周昌胜","覃兆兰","陈俊康","韦海连","覃霜娜","吴佩仙","韦敏亮","潘石浪","岑福宁","罗扬锦","左思静","韦凤","袁江桃","潘英旺"];
    var Sot=document.getElementById('but');
    var oBtu=document.getElementById('bte');
    var oBtu1=document.getElementById('bte1');
    var timer=null;
    var i=0;
    oBtu.disabled=false;
    oBtu1.disabled=true;
    oBtu.onclick=function(){
      timer=setInterval(function(){
        Sot.innerHTML=aList[i];
        i++;
        if(i==aList.length){i=0;}
      },30)
      oBtu.disabled=true;
      oBtu1.disabled=false;
    }
    oBtu1.onclick=function(){
      clearInterval(timer);
       oBtu.disabled=false;
      oBtu1.disabled=true;
    }
  }
  
	</script>
</head>
<body>
  <p class="frame">
   <button class="WYU"><b>点 名 将</b></button><br />
  <button class="but" id="but"></button><br />
  <button class="bte" id="bte">开始</button>
  <button class="bte1" id="bte1">结束</button>
  </p>
</body>
</html>